<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据编辑</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 20px 0px;
            background: #fff;
        }

        .Modular>div {
            width: 80% !important;
            margin: auto;
        }

        .m {
            width: 80%;
            height: 540px;
            margin: auto;
            margin-top: 20px;
        }

        .m_cover {
            position: relative;
            display: inline-block;
            width: 73%;
        }

        .m_cover img {
            width: 100%;
        }

        .m_edit {
            width: 25%;
            background: #fff;
            float: right;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
        }

        .m_author {
            width: 73%;
            height: 185px;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_dec {
            width: 100%;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_edit .layui-tab {
            margin: 5px 0px;
        }

        .m_edit .layui-this:after {
            border-bottom: 0px !important;
        }

        .m_edit .layui-tab-title {
            border-bottom-style: none;
        }

        .m_edit .layui-tab-title li {
            background: #e8e8e8;
            width: 47%;
            box-sizing: border-box;
            margin-left: 2%;
            border-radius: 4px;
        }

        .m_edit .layui-this {
            background: #1E9FFF !important;
            color: #fff !important;
        }

        .m_c,
        .m_edit_btn {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        .m_c {
            height: 195px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .m_c img {
            width: 100%;
            height: 100%;
            opacity: .6;
        }

        .m_edit_btn button {
            width: 30%;
        }

        .m_title {
            line-height: 40px;
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            height: 40px;
            text-indent: 2px;
        }

        .m_edit .layui-textarea {
            min-height: 150px;
        }

        .m_edit_btn {
            padding: 10px 20px;
        }

        .m_name {
            font-size: 20px;
            font-weight: bold;
            width: 50%;
            height: 60px;
            line-height: 60px;
            text-indent: 20px;
            display: inline-block;
        }

        .m_data {
            width: 50%;
            float: right;
            height: 60px;
        }

        .m_data>div {
            float: right;
            margin-right: 30px;
            font-size: 16px;
            font-weight: bold;
            height: 60%;
            line-height: 60px;
        }

        .m_author_photo {
            width: 70px;
            height: 70px;
            float: left;
            margin-left: 20px;
        }

        .m_author_photo img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .m_author_name {
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }

        .m_author_name p {
            font-size: 16px;
            margin-top: 20px;
            color: #868686;
            font-weight: bold;
        }

        .m_dec .layui-this {
            color: #1E9FFF !important;
            font-weight: bold;
            font-size: 16px;
        }

        .m_dec .layui-this:after {
            border-color: #1E9FFF !important;
        }

        .m_dec_con {
            width: 100%;
            padding: 10px 0px 20px 0px;
            border-bottom: 1px #ccc solid;
        }

        .m_dec_type {
            width: 100%;
            padding: 20px 0px;
        }

        .m_dec_type>div {
            margin-bottom: 10px;
        }

        .m_dec .layui-tab-content {
            margin-left: 10px;
        }

        .l_title {
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }

        .formTitle {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            background: #1E9FFF;
            color: #fff;
        }

        .m_c_upload {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: -20px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 25px;
            background: #1E9FFF;
            color: #fff;
        }

        .screenshot {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
        }

        #m_cover_app {
            width: 100%;
            height: 600px;
            position: relative;
        }

        #m_cover_app i {
            position: absolute;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            font-size: 25px;
        }

        .totalOut {
            display: none;
        }

        .m_dec__title {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0px;
        }

        .t_msg {
            font-size: 12px;
            font-weight: normal;
            margin-left: 10px;
            color: red
        }
    </style>
</head>

<body style="width: 100%;padding: 0px; background-color: #eaeaea;">

    <div class="m">
        <div class="m_cover">
            <!--截屏按钮-->
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal screenshot"><i
                    class="layui-icon ">&#xe65d;</i> 保存封面
            </button>
            <div id="m_cover_app">
                <iframe frameborder="none" width="100%" height="100%" id="cesiumIfm"></iframe>
                <!--全屏-->
                <i class="layui-icon totalIn">&#xe622;</i>
                <i class="layui-icon totalOut">&#xe758;</i>
            </div>
        </div>

        <div class="m_edit layui-form">
            <!-- <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> -->
            <div class="formTitle">基本信息</div>
            <!-- <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>应用编辑</li>
        </ul> -->
            <!-- <div class="layui-tab-content"> -->
            <div class="layui-tab-item layui-show" style="width: 100%;box-sizing: border-box;padding: 10px 15px;">
                <div class="m_title">名称</div>
                <input type="text" name="title" placeholder="请输入数据名称" autocomplete="off" class="layui-input name">
                <div class="m_title">描述</div>
                <textarea type="text" name="title" placeholder="请输入数据描述" autocomplete="off"
                    class="layui-textarea desc"></textarea>
                <div class="m_title">样式选择<span class="t_msg">[无数据或未选择则使用默认样式]</span></div>
                <select name="styleSel" lay-filter="styleSel" lay-search></select>
                <div class="m_title">分类</div>
                <select name="dataLabel" lay-verify=""></select>
                <div class="m_title">封面</div>
                <div class="m_c">
                    <div class="m_c">
                        <img>
                        <div class="m_c_upload"><i class="layui-icon">&#xe61f;</i>上传封面</div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item m_edit_btn">
                <button type="button" class="layui-btn layui-btn-normal">重置</button>
                <button type="button" class="layui-btn layui-btn-normal release">发布</button>
                <button type="button" class="layui-btn layui-btn-normal save">保存</button>
            </div>
        </div>
        <div class="m_author">
            <div class="m_name">-----</div>
            <div class="m_data">
                <div>
                    <i class="layui-icon">&#xe67a;</i>
                    <span>50</span>
                </div>
                <div>
                    <i class="layui-icon">&#xe60c;</i>
                    <span>35k</span>
                </div>
            </div>
            <div class="m_author_photo">
                <img src="../../static/IMG/Mould/m_author.png">
            </div>
            <div class="m_author_name">
                <p>-----</p>
            </div>
        </div>
        <div class="m_cover"
            style=" background: #fff; box-shadow: 3px 6px 11px 0 #d4d4d4;margin-top: 20px; padding-left: 20px;box-sizing: border-box">
            <div class="m_dec__title">作品描述</div>
            <div class="m_dec_con">-----</div>
            <div class="m_dec_type">
                <div>
                    发布时间：<span class="m_dec_time">2020/01/02</span>
                </div>
                <div>
                    数据类型：<span>应用/演示应用</span>
                </div>
            </div>
        </div>
    </div>


    <script src="../../JS/jquery-2.0.3.js"></script>
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script>
        //获取的样式id
        var style_id = 0;
        var id = 0;
        layui.use(['element', 'form'], function () {
            var element = layui.element,
                form = layui.form;

            //样式选择
            form.on('select(styleSel)', function (data) {
                style_id = parseInt(data.value);
                //通过id获取样式数据并展示
            })

            //获取样式选择下拉框
            var param = {
                'condition': {
                    'status': 1,
                    'userid': parent.parent.getLocalStorage('JSXM').id,
                    'groupid': 0
                },
            };
            parent.parent.ajaxPost(parent.parent.defaultUrl + '/style/selAllStyleByUser', param, function (data) {
                $('select[name=styleSel]').html('<option>请选择</option>');
                if (data.code === 200) {
                    for (var i = 0, l = data.data.length; i < l; i++) {
                        $('select[name=styleSel]').append(new Option(data.data[i].name, data.data[i].id));
                    }
                    form.render('select');
                } else if (data.message) {
                    layer.msg(data.message)
                }
            });

            //获取数据id并调用接口
            id = parseInt(parent.getUrlParam(window.location.search, 'id'));
            parent.ajaxGet(parent.defaultUrl + '/data/selDataById', { 'id': id }, function (data) {
                if (data.code === 200 && data.data) {
                    $('.name').val(data.data.name);
                    $('.m_name').text(data.data.name);
                    $('.desc').val(data.data.dataDes);
                    $('.m_dec_con').text(data.data.dataDes);
                    $('.m_dec_time').text(data.data.time);
                    $('.m_c img').attr('src', data.data.img || '../../static/IMG/nothumb.png');
                    key = data.data.id;
                    path = data.data.path;
                    type = data.data.type;

                    //获取styleid展示
                    if (data.data.styleid) {
                        $('select[name=styleSel]').next().find('dd[lay-value='+data.data.styleid+']').click();
                    }

                    //在球上显示数据(目前写死数据)
                    window.datatype = data.data.dataType;
                    $('#cesiumIfm').attr('src', '../../Cesium/index.html');
                
                }
            });
        });

        $(function () {

            //描述
            $('.m_edit').on('input propertychange', '.desc', function () {
                $('.m_dec_con').text($(this).val())
            })

            //显示用户头像和昵称
            var userObj = parent.getLocalStorage('JSXM');
            $('.m_author_photo img').attr('src', userObj.userPhoto);
            $('.m_author_name p').text(userObj.userName);

            //全屏功能
            $('.totalIn').click(function () {
                $(this).hide();
                $('.totalOut').show();
                $('body').css('overflow', 'hidden');
                //获取当前屏幕的宽高
                var w = $(window).width();
                var h = $(window).height();
                //父级宽度100%
                $('.m').css({ 'width': '100%', 'margin-top': 0 });
                $('#m_cover_app').width(w).height(h).css('z-index', 1);
            })
            $('.totalOut').click(function () {
                $(this).hide();
                $('.totalIn').show();
                $('body').css('overflow-y', 'auto');
                //父级宽度100%
                $('.m').css({ 'width': '80%', 'margin-top': '20px' });
                $('#m_cover_app').width('100%').height('600px');
            })

            $('.screenshot').click(function () {
                parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                    $('.m_c img').attr('src', base64);
                    imgBlob = blob
                });
            })
            //上传封面触发事件
            $('.m_c_upload').click(function () {
                parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                    $('.m_c img').attr('src', base64);
                    imgBlob = blob
                });
            })
            //发布应用
            $('.release').click(function () {
                parent.sysPopupf('发布设置', parent.$('#fbLevel'), 400, 360, null, ['发布', '取消'], function (index, layero) {
                    if (parent.getLocalStorage('JSXM') && parent.getLocalStorage('JSXM').id) {
                        if (imgBlob) {
                            //调用上传接口
                            var formdata = new FormData();
                            formdata.append("file", imgBlob);
                            parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                                if (data.code === 200) {
                                    parent.ajaxPost(parent.defaultUrl + '/data/insertCheckStatus', {
                                        'objid': id,
                                        "openness": parent.openness,
                                        // "openstaff":'',
                                        // "opengroup":'',
                                        'shuserid': parent.getLocalStorage('JSXM').id,
                                        "img": data.data,
                                        "content": JSON.stringify({
                                            "dataDes": $('.desc').val(),
                                            "name": $('.name').val(),
                                            "styleid": style_id
                                        }),
                                        // "path": path,
                                        // "type": type,
                                        "status": 0
                                    }, function (data) {
                                        if (data.code === 200) {
                                            parent.layer.msg('发布成功，等待审核');
                                        } else if (data.message) {
                                            parent.layer.msg(data.message)
                                        }
                                    })
                                }
                            })
                        } else {
                            parent.ajaxPost(parent.defaultUrl + '/data/insertCheckStatus', {
                                'objid': id,
                                "openness": parent.openness,
                                // "openstaff":'',
                                // "opengroup":'',
                                'shuserid': parent.getLocalStorage('JSXM').id,
                                "content": JSON.stringify({
                                    "dataDes": $('.desc').val(),
                                    "name": $('.name').val(),
                                    "styleid": style_id
                                }),
                                "img": $('.m_c img').attr('src'),
                                // "path": path,
                                // "type": type,
                                "status": 0
                            }, function (data) {
                                if (data.code === 200) {
                                    parent.layer.msg('发布成功，等待审核');
                                } else if (data.message) {
                                    parent.layer.msg(data.message)
                                }
                            })
                        }


                    }
                    parent.layer.close(index)
                })
            })

            //保存应用
            $('.save').click(function () {
                dataFn(parent.defaultUrl + '/data/updateData', {
                    "dataDes": $('.desc').val(),
                    "id": id,
                    // "label": [0],
                    "name": $('.name').val(),
                    "status": 2,
                    "progress": 100,
                    "styleid": style_id
                })
            })
        })

        //数据的保存和发布
        var imgBlob = null;

        function dataFn(url, obj) {
            //判断是否有上传图片
            if (!imgBlob) {
                obj.img = $('.m_c img').attr('src');
                upData(url, obj);
            } else {
                //调用上传接口
                var formdata = new FormData();
                formdata.append("file", imgBlob);
                parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                    if (data.code === 200) {
                        obj.img = data.data;
                        upData(url, obj);
                    }
                })
            }
        }

        //调用更新数据接口
        function upData(url, obj) {
            //调用更新数据接口
            parent.ajaxPost(url, obj, function (data) {
                if (data.code === 200) {
                    layer.msg('更新成功')
                } else if (data.message) {
                    layer.msg(data.message)
                }
            })
        }
    </script>
</body>

</html>